<template>
  <div class="advanced-features-demo">
    <h2>Vue 3 高级特性</h2>
    
    <!-- 介绍部分 -->
    <div class="introduction">
      <p>Vue 3 提供了一系列高级特性，使开发者能够构建更强大、更灵活的应用程序。本演示展示了一些最常用的高级特性。</p>
    </div>

    <!-- 1. 自定义组合式函数 (Composition Functions) -->
    <section class="demo-section">
      <h3>1. 自定义组合式函数</h3>
      <div class="demo-content">
        <div class="composition-functions">
          <h4>useCounter 组合式函数示例</h4>
          
          <div class="counter-container">
            <div class="counter-display">{{ count }}</div>
            
            <div class="counter-controls">
              <button @click="increment" class="btn">+</button>
              <button @click="decrement" class="btn">-</button>
              <button @click="reset" class="btn">重置</button>
            </div>
            
            <div class="counter-info">
              <p>累计点击次数: {{ clickCount }}</p>
              <p>最后操作: {{ lastOperation }}</p>
            </div>
          </div>
          
          <div class="code-snippet">
            <CodeBlock :code="counterCodeSnippet" language="javascript"></CodeBlock>
          </div>
        </div>
        
        <div class="composition-functions">
          <h4>useLocalStorage 组合式函数示例</h4>
          
          <div class="local-storage-container">
            <h5>持久化数据</h5>
            
            <div class="storage-form">
              <div class="form-group">
                <label for="storage-key">键名:</label>
                <input id="storage-key" v-model="storageKey" type="text" class="input">
              </div>
              
              <div class="form-group">
                <label for="storage-value">值:</label>
                <input id="storage-value" v-model="storageValue" type="text" class="input">
              </div>
              
              <button @click="saveToStorage" class="btn">保存到 LocalStorage</button>
              <button @click="loadFromStorage" class="btn btn-secondary">从 LocalStorage 加载</button>
              <button @click="clearStorage" class="btn btn-danger">清除</button>
            </div>
            
            <div class="storage-status" v-if="storageMessage">
              {{ storageMessage }}
            </div>
          </div>
          
          <div class="code-snippet">
            <CodeBlock :code="localStorageCodeSnippet" language="javascript"></CodeBlock>
          </div>
        </div>
      </div>
    </section>

    <!-- 2. 插件系统 -->
    <section class="demo-section">
      <h3>2. Vue 3 插件系统</h3>
      <div class="demo-content">
        <div class="plugin-system">
          <h4>模拟插件系统演示</h4>
          
          <div class="plugins-demo">
            <div class="plugin-card">
              <h5>1. 消息通知插件</h5>
              <p>使用全局方法 $notify 显示不同类型的通知</p>
              
              <div class="plugin-actions">
                <button @click="showSuccessNotification" class="btn">成功通知</button>
                <button @click="showErrorNotification" class="btn btn-danger">错误通知</button>
                <button @click="showInfoNotification" class="btn btn-info">信息通知</button>
              </div>
            </div>
            
            <div class="plugin-card">
              <h5>2. 全局配置插件</h5>
              <p>访问全局配置项</p>
              
              <div class="config-display">
                <p><strong>应用名称:</strong> {{ appConfig.name }}</p>
                <p><strong>版本:</strong> {{ appConfig.version }}</p>
                <p><strong>调试模式:</strong> {{ appConfig.debug ? '开启' : '关闭' }}</p>
              </div>
            </div>
            
            <div class="plugin-card">
              <h5>3. 国际化插件</h5>
              <p>切换应用语言</p>
              
              <div class="i18n-controls">
                <button @click="switchToEnglish" class="btn">English</button>
                <button @click="switchToChinese" class="btn btn-primary">中文</button>
              </div>
              
              <div class="i18n-display">
                <p><strong>欢迎语:</strong> {{ welcomeMessage }}</p>
                <p><strong>当前时间:</strong> {{ currentTimeMessage }}</p>
                <p><strong>再见:</strong> {{ goodbyeMessage }}</p>
              </div>
            </div>
          </div>
          
          <div class="code-snippet">
            <CodeBlock :code="pluginCodeSnippet" language="javascript"></CodeBlock>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 响应式系统高级用法 -->
    <section class="demo-section">
      <h3>3. 响应式系统高级用法</h3>
      <div class="demo-content">
        <div class="reactive-advanced">
          <h4>Reactivity API 高级演示</h4>
          
          <div class="reactive-demos">
            <div class="demo-card">
              <h5>1. readonly 与 shallowReadonly</h5>
              
              <div class="demo-content">
                <div class="readonly-example">
                  <h6>原始对象</h6>
                  <pre>{{ userProfile }}</pre>
                  
                  <h6>只读代理 (readonly)</h6>
                  <pre>{{ readonlyUserProfile }}</pre>
                  
                  <div class="demo-actions">
                    <button @click="tryModifyUser" class="btn">尝试修改 (不会生效)</button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="demo-card">
              <h5>2. 自定义响应式转换</h5>
              
              <div class="custom-reactive">
                <h6>数据格式化示例</h6>
                
                <div class="formatted-data">
                  <p><strong>原始价格:</strong> {{ rawPrice }}</p>
                  <p><strong>格式化价格:</strong> {{ formattedPrice }}</p>
                  <p><strong>折扣价:</strong> {{ discountedPrice }}</p>
                </div>
                
                <div class="demo-actions">
                  <button @click="changePrice" class="btn">更改价格</button>
                  <button @click="toggleDiscount" class="btn btn-warning">
                    {{ isDiscounted ? '取消折扣' : '应用折扣' }}
                  </button>
                </div>
              </div>
            </div>
            
            <div class="demo-card">
              <h5>3. 计算属性与侦听器高级用法</h5>
              
              <div class="computed-watch-demo">
                <h6>计算属性缓存与依赖跟踪</h6>
                
                <div class="demo-form">
                  <div class="form-group">
                    <label for="firstName">名字:</label>
                    <input id="firstName" v-model="firstName" type="text" class="input">
                  </div>
                  
                  <div class="form-group">
                    <label for="lastName">姓氏:</label>
                    <input id="lastName" v-model="lastName" type="text" class="input">
                  </div>
                </div>
                
                <div class="computed-results">
                  <p><strong>全名:</strong> {{ fullName }}</p>
                  <p><strong>全名大写:</strong> {{ fullNameUpperCase }}</p>
                  <p><strong>全名长度:</strong> {{ fullNameLength }} 个字符</p>
                </div>
                
                <div class="watch-log">
                  <h6>侦听器日志:</h6>
                  <div v-if="watchLog.length > 0" class="log-list">
                    <div v-for="(log, index) in watchLog" :key="index" class="log-item">
                      {{ log }}
                    </div>
                  </div>
                  <div v-else class="no-logs">暂无日志</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 渲染函数和JSX -->
    <section class="demo-section">
      <h3>4. 渲染函数和JSX</h3>
      <div class="demo-content">
        <div class="render-functions">
          <h4>渲染函数演示</h4>
          
          <div class="render-demo">
            <h5>动态列表渲染</h5>
            
            <div class="dynamic-list">
              <div class="list-controls">
                <input v-model="newItemText" placeholder="输入新项目" class="input">
                <button @click="addItem" class="btn">添加</button>
                <button @click="removeAllItems" class="btn btn-danger">清空</button>
              </div>
              
              <div class="list-display">
                <ListRenderer :items="dynamicItems" :isOrdered="isOrdered" />
              </div>
              
              <div class="list-options">
                <label>
                  <input v-model="isOrdered" type="checkbox"> 使用有序列表
                </label>
              </div>
            </div>
            
            <div class="code-snippet">
              <CodeBlock :code="renderFunctionCodeSnippet" language="javascript"></CodeBlock>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 组合式 API 高级模式 -->
    <section class="demo-section">
      <h3>5. 组合式 API 高级模式</h3>
      <div class="demo-content">
        <div class="composition-patterns">
          <h4>高级模式演示</h4>
          
          <div class="pattern-demos">
            <div class="pattern-card">
              <h5>1. 组合式函数复用</h5>
              
              <div class="counter-group">
                <h6>计数器 1</h6>
                <div class="counter-mini">
                  <span>{{ counter1.count }}</span>
                  <button @click="counter1.increment" class="btn-small">+</button>
                  <button @click="counter1.decrement" class="btn-small">-</button>
                </div>
                
                <h6>计数器 2</h6>
                <div class="counter-mini">
                  <span>{{ counter2.count }}</span>
                  <button @click="counter2.increment" class="btn-small">+</button>
                  <button @click="counter2.decrement" class="btn-small">-</button>
                </div>
              </div>
            </div>
            
            <div class="pattern-card">
              <h5>2. 依赖注入模式</h5>
              
              <div class="dependency-injection">
                <h6>主题配置</h6>
                
                <div class="theme-controls">
                  <button @click="setLightTheme" class="btn btn-light">浅色主题</button>
                  <button @click="setDarkTheme" class="btn btn-dark">深色主题</button>
                  <button @click="setGreenTheme" class="btn btn-green">绿色主题</button>
                </div>
                
                <div class="theme-display">
                  <div class="theme-box" :style="{ backgroundColor: currentTheme.background, color: currentTheme.text }">
                    当前主题: {{ currentTheme.name }}
                  </div>
                </div>
              </div>
            </div>
            
            <div class="pattern-card">
              <h5>3. 异步状态管理</h5>
              
              <div class="async-management">
                <h6>模拟数据加载</h6>
                
                <div class="async-actions">
                  <button @click="fetchData" class="btn" :disabled="isLoading">
                    {{ isLoading ? '加载中...' : '加载数据' }}
                  </button>
                </div>
                
                <div v-if="isLoading" class="loading-state">
                  加载中...
                </div>
                
                <div v-else-if="error" class="error-state">
                  错误: {{ error }}
                </div>
                
                <div v-else-if="data" class="data-display">
                  <CodeBlock :code="JSON.stringify(data, null, 2)" language="json"></CodeBlock>
                </div>
                
                <div v-else class="empty-state">
                  点击加载数据
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, readonly, shallowReadonly, onMounted, h } from 'vue'
import CodeBlock from '@components/CodeBlock.vue'

// 模拟自定义组合式函数 - useCounter
const useCounter = (initialValue = 0) => {
  const count = ref(initialValue)
  const clickCount = ref(0)
  const lastOperation = ref('初始化')
  
  const increment = () => {
    count.value++
    clickCount.value++
    lastOperation.value = '增加'
  }
  
  const decrement = () => {
    count.value--
    clickCount.value++
    lastOperation.value = '减少'
  }
  
  const reset = () => {
    count.value = initialValue
    lastOperation.value = '重置'
  }
  
  return {
    count,
    clickCount,
    lastOperation,
    increment,
    decrement,
    reset
  }
}

// 使用自定义组合式函数
const { count, clickCount, lastOperation, increment, decrement, reset } = useCounter(0)

// 模拟自定义组合式函数 - useLocalStorage
const useLocalStorage = (key, initialValue = '') => {
  const storedValue = ref(localStorage.getItem(key) || initialValue)
  const message = ref('')
  
  const save = (newValue) => {
    storedValue.value = newValue
    localStorage.setItem(key, newValue)
    message.value = `已保存到 LocalStorage: ${key} = ${newValue}`
    setTimeout(() => message.value = '', 3000)
  }
  
  const load = () => {
    const value = localStorage.getItem(key)
    if (value !== null) {
      storedValue.value = value
      message.value = `已从 LocalStorage 加载: ${key} = ${value}`
    } else {
      message.value = `LocalStorage 中不存在键: ${key}`
    }
    setTimeout(() => message.value = '', 3000)
  }
  
  const clear = () => {
    storedValue.value = ''
    localStorage.removeItem(key)
    message.value = `已从 LocalStorage 清除键: ${key}`
    setTimeout(() => message.value = '', 3000)
  }
  
  return {
    value: storedValue,
    message,
    save,
    load,
    clear
  }
}

const storageKey = ref('demoKey')
const storageValue = ref('demoValue')
const { message: storageMessage, save: saveStorage, load: loadStorage, clear: clearStorage } = useLocalStorage(storageKey.value, storageValue.value)

const saveToStorage = () => {
  saveStorage(storageValue.value)
}

const loadFromStorage = () => {
  loadStorage()
  // 模拟更新显示值
  storageValue.value = localStorage.getItem(storageKey.value) || ''
}

// 模拟插件系统
const appConfig = reactive({
  name: 'Vue 3 演示应用',
  version: '1.0.0',
  debug: true
})

// 模拟消息通知插件
const showNotification = (message, type = 'info') => {
  // 实际应用中这里会调用插件的方法
  const colors = {
    success: '#28a745',
    error: '#dc3545',
    info: '#17a2b8'
  }
  
  console.log(`[${type.toUpperCase()}] ${message}`)
  
  // 简单的DOM操作演示
  const notification = document.createElement('div')
  notification.textContent = message
  notification.style.position = 'fixed'
  notification.style.top = '20px'
  notification.style.right = '20px'
  notification.style.padding = '10px 20px'
  notification.style.backgroundColor = colors[type]
  notification.style.color = 'white'
  notification.style.borderRadius = '4px'
  notification.style.zIndex = '9999'
  notification.style.transition = 'opacity 0.3s'
  
  document.body.appendChild(notification)
  
  setTimeout(() => {
    notification.style.opacity = '0'
    setTimeout(() => {
      document.body.removeChild(notification)
    }, 300)
  }, 3000)
}

const showSuccessNotification = () => showNotification('操作成功！', 'success')
const showErrorNotification = () => showNotification('操作失败！', 'error')
const showInfoNotification = () => showNotification('这是一条信息通知', 'info')

// 模拟国际化插件
const i18n = reactive({
  locale: 'zh',
  messages: {
    en: {
      welcome: 'Welcome to Vue 3',
      currentTime: 'Current time is',
      goodbye: 'Goodbye'
    },
    zh: {
      welcome: '欢迎使用 Vue 3',
      currentTime: '当前时间是',
      goodbye: '再见'
    }
  }
})

const switchToEnglish = () => i18n.locale = 'en'
const switchToChinese = () => i18n.locale = 'zh'

const welcomeMessage = computed(() => i18n.messages[i18n.locale].welcome)
const currentTimeMessage = computed(() => {
  const now = new Date().toLocaleTimeString()
  return `${i18n.messages[i18n.locale].currentTime} ${now}`
})
const goodbyeMessage = computed(() => i18n.messages[i18n.locale].goodbye)

// 响应式系统高级用法
const userProfile = reactive({
  name: '张三',
  age: 30,
  email: 'zhangsan@example.com',
  address: {
    city: '北京',
    district: '朝阳区'
  }
})

const readonlyUserProfile = readonly(userProfile)
const shallowReadonlyUserProfile = shallowReadonly(userProfile)

const tryModifyUser = () => {
  // 这不会生效，因为是只读的
  try {
    readonlyUserProfile.name = '李四'
  } catch (error) {
    console.log('无法修改只读对象')
  }
}

// 自定义响应式转换
const rawPrice = ref(100)
const isDiscounted = ref(false)

const formattedPrice = computed(() => {
  return `¥${rawPrice.value ? rawPrice.value.toFixed(2) : '0.00'}`
})

const discountedPrice = computed(() => {
  if (!isDiscounted.value) return formattedPrice.value
  const discounted = rawPrice.value * 0.8 // 20% 折扣
  return `¥${discounted ? discounted.toFixed(2) : '0.00'}`
})

const changePrice = () => {
  rawPrice.value = Math.floor(Math.random() * 200) + 50
}

const toggleDiscount = () => {
  isDiscounted.value = !isDiscounted.value
}

// 计算属性与侦听器高级用法
const firstName = ref('')
const lastName = ref('')
const watchLog = ref([])

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`.trim()
})

const fullNameUpperCase = computed(() => {
  return fullName.value.toUpperCase()
})

const fullNameLength = computed(() => {
  return fullName.value.length
})

// 深度侦听器
watch(
  [firstName, lastName],
  ([newFirst, newLast], [oldFirst, oldLast]) => {
    const log = `名字从 "${oldFirst} ${oldLast}" 变更为 "${newFirst} ${newLast}"`
    watchLog.value.push(log)
    // 限制日志长度
    if (watchLog.value.length > 5) {
      watchLog.value.shift()
    }
  },
  { immediate: false }
)

// 渲染函数组件 - Vue 3 语法
const ListRenderer = {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    isOrdered: {
      type: Boolean,
      default: false
    }
  },
  render() {
    if (this.items.length === 0) {
      return h('div', { class: 'empty-list' }, '列表为空')
    }
    
    const itemElements = this.items.map((item, index) => 
      h('li', { class: 'list-item', key: index }, item)
    )
    
    return h(
      this.isOrdered ? 'ol' : 'ul',
      { class: 'dynamic-rendered-list' },
      itemElements
    )
  }
}

const dynamicItems = ref(['项目 1', '项目 2', '项目 3'])
const newItemText = ref('')
const isOrdered = ref(false)

const addItem = () => {
  if (newItemText.value.trim()) {
    dynamicItems.value.push(newItemText.value.trim())
    newItemText.value = ''
  }
}

const removeAllItems = () => {
  dynamicItems.value = []
}

// 组合式 API 高级模式 - 多个计数器复用
const counter1 = useCounter(5)
const counter2 = useCounter(10)

// 组合式 API 高级模式 - 依赖注入模拟
const themes = {
  light: { name: '浅色', background: '#ffffff', text: '#333333' },
  dark: { name: '深色', background: '#333333', text: '#ffffff' },
  green: { name: '绿色', background: '#d4edda', text: '#155724' }
}

const currentTheme = ref(themes.light)

const setLightTheme = () => currentTheme.value = themes.light
const setDarkTheme = () => currentTheme.value = themes.dark
const setGreenTheme = () => currentTheme.value = themes.green

// 组合式 API 高级模式 - 异步状态管理
const isLoading = ref(false)
const data = ref(null)
const error = ref(null)

const fetchData = async () => {
  isLoading.value = true
  error.value = null
  data.value = null
  
  try {
    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    // 模拟返回数据
    data.value = {
      id: 1,
      name: '模拟数据',
      timestamp: new Date().toISOString(),
      items: [
        { id: 1, title: '项目 1' },
        { id: 2, title: '项目 2' },
        { id: 3, title: '项目 3' }
      ]
    }
  } catch (err) {
    error.value = '数据加载失败'
  } finally {
    isLoading.value = false
  }
}

// 代码片段
const counterCodeSnippet = `// useCounter 组合式函数示例
const useCounter = (initialValue = 0) => {
  const count = ref(initialValue)
  const clickCount = ref(0)
  const lastOperation = ref('初始化')
  
  const increment = () => {
    count.value++
    clickCount.value++
    lastOperation.value = '增加'
  }
  
  const decrement = () => {
    count.value--
    clickCount.value++
    lastOperation.value = '减少'
  }
  
  const reset = () => {
    count.value = initialValue
    lastOperation.value = '重置'
  }
  
  return {
    count,
    clickCount,
    lastOperation,
    increment,
    decrement,
    reset
  }
}`

const localStorageCodeSnippet = `// useLocalStorage 组合式函数示例
const useLocalStorage = (key, initialValue = '') => {
  const storedValue = ref(localStorage.getItem(key) || initialValue)
  const message = ref('')
  
  const save = (newValue) => {
    storedValue.value = newValue
    localStorage.setItem(key, newValue)
    message.value = '已保存'
  }
  
  const load = () => {
    const value = localStorage.getItem(key)
    if (value !== null) {
      storedValue.value = value
    }
  }
  
  const clear = () => {
    storedValue.value = ''
    localStorage.removeItem(key)
  }
  
  return {
    value: storedValue,
    message,
    save,
    load,
    clear
  }
}`

const pluginCodeSnippet = `// Vue 3 插件示例
const MyPlugin = {
  install(app, options) {
    // 1. 添加全局属性
    app.config.globalProperties.$notify = (message, type) => {
      // 通知逻辑
    }
    
    // 2. 添加全局配置
    app.config.globalProperties.$config = options.config || {}
    
    // 3. 提供依赖注入
    app.provide('i18n', options.i18n || {})
    
    // 4. 注册全局组件
    app.component('MyGlobalComponent', MyGlobalComponent)
  }
}

// 使用插件
const app = createApp(App)
app.use(MyPlugin, {
  config: { name: 'My App' },
  i18n: { locale: 'zh' }
})`

const renderFunctionCodeSnippet = `// 渲染函数组件示例
const ListRenderer = {
  props: {
    items: {
      type: Array,
      default: () => []
    },
    isOrdered: {
      type: Boolean,
      default: false
    }
  },
  render() {
    if (this.items.length === 0) {
      return this.$createElement('div', '列表为空')
    }
    
    const itemElements = this.items.map(item => 
      this.$createElement('li', item)
    )
    
    return this.$createElement(
      this.isOrdered ? 'ol' : 'ul',
      itemElements
    )
  }
}`
</script>

<style scoped>
.advanced-features-demo {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.introduction {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.demo-section {
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  color: #42b983;
  margin-bottom: 20px;
  border-bottom: 2px solid #42b983;
  padding-bottom: 10px;
}

.demo-content {
  margin-bottom: 20px;
}

.btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn:hover:not(:disabled) {
  background-color: #3aa876;
}

.btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-secondary {
  background-color: #6c757d;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #5a6268;
}

.btn-danger {
  background-color: #dc3545;
}

.btn-danger:hover:not(:disabled) {
  background-color: #c82333;
}

.btn-info {
  background-color: #17a2b8;
}

.btn-info:hover:not(:disabled) {
  background-color: #138496;
}

.btn-primary {
  background-color: #007bff;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0069d9;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
}

.btn-warning:hover:not(:disabled) {
  background-color: #e0a800;
}

.btn-light {
  background-color: #f8f9fa;
  color: #212529;
}

.btn-light:hover:not(:disabled) {
  background-color: #e9ecef;
}

.btn-dark {
  background-color: #343a40;
}

.btn-dark:hover:not(:disabled) {
  background-color: #23272b;
}

.btn-green {
  background-color: #28a745;
}

.btn-green:hover:not(:disabled) {
  background-color: #218838;
}

.input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  flex: 1;
}

/* 组合式函数样式 */
.composition-functions {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.counter-container {
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
}

.counter-display {
  font-size: 48px;
  font-weight: bold;
  color: #42b983;
  margin-bottom: 20px;
}

.counter-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.counter-info {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  font-size: 14px;
}

.counter-info p {
  margin: 5px 0;
}

.local-storage-container {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
}

.storage-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.storage-status {
  padding: 10px;
  background-color: #d4edda;
  color: #155724;
  border-radius: 6px;
  text-align: center;
}

.code-snippet {
  background-color: #282c34;
  color: #abb2bf;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}

/* 插件系统样式 */
.plugin-system {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.plugins-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.plugin-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #42b983;
}

.plugin-card h5 {
  margin-top: 0;
  color: #42b983;
}

.plugin-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}

.config-display {
  margin-top: 15px;
}

.config-display p {
  margin: 8px 0;
}

.i18n-controls {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.i18n-display {
  margin-top: 15px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.i18n-display p {
  margin: 5px 0;
}

/* 响应式系统高级用法样式 */
.reactive-advanced {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.reactive-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.demo-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

.demo-card h5 {
  margin-top: 0;
  color: #42b983;
}

.readonly-example {
  padding: 15px 0;
}

.readonly-example h6 {
  margin-bottom: 10px;
}

.readonly-example pre {
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 12px;
  margin-bottom: 15px;
}

.demo-actions {
  margin-top: 15px;
}

.custom-reactive {
  padding: 15px 0;
}

.formatted-data {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 15px;
}

.formatted-data p {
  margin: 8px 0;
}

.computed-watch-demo {
  padding: 15px 0;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.computed-results {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  margin-bottom: 15px;
}

.computed-results p {
  margin: 8px 0;
}

.watch-log {
  margin-top: 15px;
}

.log-list {
  max-height: 150px;
  overflow-y: auto;
  font-size: 12px;
}

.log-item {
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}

.log-item:last-child {
  border-bottom: none;
}

.no-logs {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* 渲染函数样式 */
.render-functions {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.render-demo {
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 20px;
}

.dynamic-list {
  padding: 15px 0;
}

.list-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.list-display {
  margin-bottom: 20px;
}

.dynamic-rendered-list {
  padding-left: 20px;
}

.list-item {
  padding: 8px 0;
}

.empty-list {
  color: #999;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

.list-options {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 组合式 API 高级模式样式 */
.composition-patterns {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.pattern-demos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.pattern-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

.pattern-card h5 {
  margin-top: 0;
  color: #42b983;
}

.counter-group {
  padding: 15px 0;
}

.counter-group h6 {
  margin-bottom: 10px;
}

.counter-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.counter-mini span {
  font-size: 24px;
  font-weight: bold;
  color: #42b983;
  min-width: 40px;
  text-align: center;
}

.dependency-injection {
  padding: 15px 0;
}

.theme-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.theme-display {
  margin-top: 20px;
}

.theme-box {
  padding: 20px;
  border-radius: 6px;
  text-align: center;
  transition: all 0.3s;
}

.async-management {
  padding: 15px 0;
}

.async-actions {
  margin-bottom: 20px;
}

.loading-state, .error-state, .empty-state {
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}

.loading-state {
  background-color: #e3f2fd;
  color: #1976d2;
}

.error-state {
  background-color: #fce4ec;
  color: #c2185b;
}

.empty-state {
  background-color: #f5f5f5;
  color: #9e9e9e;
  font-style: italic;
}

.data-display {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.data-display pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .plugins-demo,
  .reactive-demos,
  .pattern-demos {
    grid-template-columns: 1fr;
  }
  
  .list-controls {
    flex-direction: column;
  }
  
  .i18n-controls,
  .theme-controls {
    flex-direction: column;
  }
  
  .code-snippet {
    font-size: 10px;
  }
}
</style>